<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-04-01 16:25:17
 * @LastEditors: voanit
 * @LastEditTime: 2022-04-04 12:15:54
-->
<template>
  <div class="settings-container">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="角色管理" name="first"
          ><roleManger></roleManger>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-alert
            title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
            type="info"
            show-icon
          >
          </el-alert>
          <el-form
            :label-position="labelPosition"
            label-width="80px"
            :model="formLabelAlign"
            disabled
          >
            <el-form-item label="公司名称">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="formLabelAlign.region"></el-input>
            </el-form-item>
            <el-form-item label="公司邮箱">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                v-model="formLabelAlign.type"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import roleManger from "./components/role-manager.vue";
export default {
  components: {
    roleManger,
  },
  data() {
    return {
      activeName: "first",
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="scss" scoped>
.settings-container {
  padding: 30px 50px;
  .el-form {
    width: 40%;
    margin: 20px;
  }
}
</style>
